import { connect } from 'dva';
import {
  Form,
  Button,
  Transfer,
  Tabs,
  Modal,
} from 'antd';
import React from 'react';


const { TabPane } = Tabs;

const RoleRights = Form.create()(
  class CreateForm extends React.Component {
    state = {
      open: false,
      mockData: [],
      targetKeys: [],
    }

    constructor(props: any) {
      super(props);
      this.state = {
        open: false,
        mockData: [],
        targetKeys: [],
      };
    }

    componentDidMount() {
      this.getMock();
    }

    getMock = () => {
      const targetKeys = [];
      const mockData = [];

      const data = {
        key: '1',
        title: '编辑供应商',
        description: '编辑供应商',
        chosen: true,
      };
      const data2 = {
        key: '2',
        title: '删除供应商',
        description: '删除供应商',
        chosen: true,
      };

      const data3 = {
        key: '3',
        title: '录入费用',
        description: '录入费用',
        chosen: false,
      };
      mockData.push(data);
      mockData.push(data2);
      mockData.push(data3);

      if (data.chosen) {
        targetKeys.push(data.key);
      }

      mockData.push(data);
      this.setState({ mockData, targetKeys });
    };

    filterOption = (inputValue : any, option: any) => option.description.indexOf(inputValue) > -1;

    handleChange = (targetKeys: any) => {
      this.setState({ targetKeys });
    };

    handleSearch = (dir: any, value: any) => {
    };


    handleCancel = (params: any) => {
      // @ts-ignore
      this.props.form.resetFields();
      this.setState({ open: false });
    };

    handleOpen = () => {
      this.setState({ open: true });
    };


    handleSubmit = (e: any) => {
      // @ts-ignore
      const { form } = this.props;
      form.validateFieldsAndScroll((err: any, values: any) => {
      });
    };

    render() {
      const footer = [];
      footer.push(
        // @ts-ignore
        // eslint-disable-next-line react/jsx-no-bind,react/react-in-jsx-scope
        <Button key="cancel" size="large" onClick={this.handleCancel.bind(this)}>
          取消
        </Button>,
      );


      footer.push(
        // @ts-ignore
        // eslint-disable-next-line react/jsx-no-bind
        <Button key="submit" size="large" loading={this.props.loading} onClick={this.handleSubmit.bind(this)}>
          确认
        </Button>,
      );

      return (
        <Modal
          destroyOnClose
          title="权限配置"
          visible={this.state.open}
          width={800}
          footer={footer}
          onCancel={this.handleCancel}
        >
          <Form>
            <Tabs tabPosition="top" style={{ width: '100%' }}>
              <TabPane tab="角色权限配置" key="1">
                <div style={{ display: 'flex' }}>
                  <div>
                    <Transfer
                      dataSource={this.state.mockData}
                      showSearch
                      filterOption={this.filterOption}
                      targetKeys={this.state.targetKeys}
                      onChange={this.handleChange}
                      onSearch={this.handleSearch}
                      render={item => item.title}
                      listStyle={{
                        marginLeft: 80,
                        marginRight: 60,
                        width: 200,
                        height: 300,
                      }}
                    />
                  </div>
                  </div>
              </TabPane>
            </Tabs>
          </Form>
        </Modal>
      );
    }
  },
);

function mapStateToProps(state: any) {
  return {
    loading: state.loading.models.creditFinance,
  };
}

export default connect(mapStateToProps)(RoleRights);
